﻿@namespace BootstrapBlazor.Components
@typeparam TItem
@inherits BootstrapComponentBase

<div @attributes="@AdditionalAttributes" class="@TableClassName" @ref="TableElement">
    <CascadingValue Value="this" IsFixed="true">
        @TableColumns?.Invoke(HeaderModel)
    </CascadingValue>
    @if (ScreenSize == 0)
    {
        <div class="table-loading">
            <Spinner Color="Color.Primary" />
        </div>
    }
    else
    {
        <div class="table-toolbar">
            @if (ShowToolbar)
            {
                <TableToolbar TItem="TItem" OnGetSelectedRows="@GetSelectedRows">
                    @if (ShowDefaultButtons)
                    {
                        @if (ShowNewButton)
                        {
                            <TableToolbarButton TItem="TItem" Color="Color.Success" OnClick="@AddAsync" Icon="fa fa-plus" Text="新建" />
                        }
                        @if (ShowEditButton)
                        {
                            <TableToolbarButton TItem="TItem" Color="Color.Primary" OnClick="@EditAsync" Icon="fa fa-pencil" Text="编辑" />
                        }
                        @if (ShowDeleteButton)
                        {
                            <TableToolbarPopconfirmButton TItem="TItem" Color="Color.Danger" Icon="fa fa-remove" Text="删除"
                                                          OnBeforeClick="@ConfirmDelete" OnConfirm="@DeleteAsync"
                                                          CloseButtonText="取消" Content="确认要删除选中的所有行吗？"
                                                          ConfirmButtonText="删除" ConfirmButtonColor="Color.Danger" />
                        }
                    }
                    @TableToolbarTemplate
                </TableToolbar>
                @if (ShowRefresh)
                {
                    <div class="float-right table-toolbar-button table-column-right">
                        <button class="btn btn-secondary" type="button" title="刷新" @onclick="@QueryAsync">
                            <i class="fa fa-refresh"></i>
                            <span class="d-none d-sm-inline-block">刷新</span>
                        </button>
                    </div>
                }
            }
            @if (ShowSearch)
            {
                <div class="float-right table-toolbar-button btn-group">
                    <div class="input-group">
                        <BootstrapInput TItem="string" class="table-toolbar-search" placeholder="搜索" @bind-Value="@SearchText" @onkeyup="@OnKeyUp">
                            <Tooltip Placement="Placement.Top" Title="@SearchTooltip" IsHtml="true" />
                        </BootstrapInput>
                        <div class="input-group-append">
                            <button class="btn btn-secondary" type="button" title="搜索" @onclick="@SearchClick">
                                <i class="fa fa-search"></i>
                                <span class="d-none d-sm-inline-block">搜索</span>
                            </button>
                            <button class="btn btn-secondary" type="button" title="清空过滤" @onclick="@ClearSearchClick">
                                <i class="fa fa-trash"></i>
                                <span class="d-none d-sm-inline-block">清空过滤</span>
                            </button>
                            @if (ShowAdvancedSearch)
                            {
                                <Button class="@AdvanceSearchClass" Icon="fa fa-search-plus" OnClickWithoutRender="@ShowSearchDialog">
                                    <span class="d-none d-sm-inline-block">高级搜索</span>
                                </Button>
                            }
                        </div>
                    </div>
                </div>
            }
        </div>
        <CascadingValue Value="this" IsFixed="true">
            <div class="@WrapperClassName" style="@WrapperStyleName">
                @if (RetrieveRenderModel == TableViewModel.Table)
                {
                    <table class="@ClassName">
                        <colgroup>
                            @if (IsMultipleSelect)
                            {
                                @if (ShowCheckboxText)
                                {
                                    <col width="80" />
                                }
                                else
                                {
                                    <col width="36" />
                                }
                            }
                            @if (ShowLineNo)
                            {
                                <col width="60" />
                            }
                            @foreach (var col in Columns)
                            {
                                <col width="@col.Width" />
                            }
                            @if (ShowExtendButtons)
                            {
                                <col width="@ExtendButtonColumnWidth" />
                            }
                        </colgroup>
                        <tbody>
                            @{
                                StarRowIndex = (PageIndex - 1) * PageItems + 1;
                            }
                            @foreach (var item in Items)
                            {
                                @if (IsMultipleSelect)
                                {
                                    <tr class="@GetRowClassString(item)" @onclick="@(e => ClickRow(item))">
                                        <td>
                                            <div class="table-cell">
                                                <Checkbox TValue="TItem" Value="@item" State="@RowCheckState(item)" OnStateChanged="@OnCheck"></Checkbox>
                                            </div>
                                        </td>
                                        @RenderRow(item)
                                    </tr>
                                }
                                else
                                {
                                    <tr class="@GetRowClassString(item)" @onclick="@(e => ClickRow(item))" @ondblclick="@(e => DoubleClickRow(item))">
                                        @RenderRow(item)
                                    </tr>
                                }
                            }
                        </tbody>
                        <thead>
                            <tr>
                                @if (IsMultipleSelect)
                                {
                                    <th class="@CheckboxColumnClass">
                                        <div class="table-cell">
                                            <Checkbox TValue="TItem" @ref="@HeaderCheckbox"
                                                      DisplayText="@CheckboxDisplayTextString" ShowAfterLabel="@ShowCheckboxText"
                                                      State="@HeaderCheckState()" OnStateChanged="@OnHeaderCheck"></Checkbox>
                                        </div>
                                    </th>
                                }
                                @if (ShowLineNo)
                                {
                                    <th>
                                        <div class="table-cell">@LineNoText</div>
                                    </th>
                                }
                                @foreach (var col in Columns)
                                {
                                    var fieldName = col.GetFieldName();
                                    var displayName = col.GetDisplayName();
                                    <th class="@GetHeaderClassString(col)" @onclick="@(e => OnClickHeader(col))">
                                        <div class="@GetHeaderWrapperClassString(col)">
                                            <span class="@GetHeaderTextClassString(col)">@displayName</span>
                                            @if (col.Filterable)
                                            {
                                                <i class="@GetFilterClassString(fieldName)" data-field="@fieldName" @onclick:stopPropagation @onclick="@(e => OnFilterClick(col))"></i>
                                            }
                                            @if (col.Sortable)
                                            {
                                                <i class="@GetIconClassString(fieldName)"></i>
                                            }
                                        </div>
                                    </th>
                                }
                                @if (ShowExtendButtons)
                                {
                                    <th class="@ButtonColumnClass">
                                        <div class="table-cell is-button-column">
                                            @ColumnButtonTemplateHeaderText
                                        </div>
                                    </th>
                                }
                            </tr>
                        </thead>
                        @if (ShowFooter)
                        {
                            <tfoot>
                                <tr>
                                    <CascadingValue Value="@ScreenSize" Name="ScreenSize">
                                        <CascadingValue Value="@ViewModelResponsiveWidth" Name="ViewModelResponsiveWidth">
                                            @TableFooter?.Invoke(Items)
                                        </CascadingValue>
                                    </CascadingValue>
                                </tr>
                            </tfoot>
                        }
                    </table>
                }
                else
                {
                    StarRowIndex = (PageIndex - 1) * PageItems + 1;
                    foreach (var item in Items)
                    {
                        <div class="@GetRowClassString(item, "table-row")" @onclick="@(e => ClickRow(item))">
                            @if (IsMultipleSelect)
                            {
                                <div class="table-cell">
                                    <label>@CheckboxDisplayText</label>
                                    <Checkbox TValue="TItem" Value="@item" State="@RowCheckState(item)" OnStateChanged="@OnCheck"></Checkbox>
                                </div>
                            }
                            @if (ShowLineNo)
                            {
                                <div class="table-cell">
                                    <label>@LineNoText</label>
                                    <span>@(StarRowIndex++)</span>
                                </div>
                            }
                            @foreach (var col in Columns)
                            {
                                <div class="table-cell">
                                    <label>
                                        @col.GetDisplayName()
                                    </label>
                                    <span>
                                        @GetValue(col, item)
                                    </span>
                                </div>
                            }
                            @if (ShowExtendButtons)
                            {
                                <div class="table-cell">
                                    <label>@ColumnButtonTemplateHeaderText</label>
                                    <span class="btn-group">
                                        @if (ShowDefaultButtons)
                                        {
                                            @if (ShowEditButton)
                                            {
                                                <Button Size="Size.ExtraSmall" OnClick="@(EventCallback.Factory.Create<MouseEventArgs>(this, e => ClickEditButton(item)))" Icon="fa fa-edit" Text="编辑" />
                                            }
                                            @if (ShowDeleteButton)
                                            {
                                                <PopConfirmButton Placement="Placement.Left" Size="Size.ExtraSmall"
                                                                  Color="Color.Danger" Icon="fa fa-remove" Text="删除"
                                                                  CloseButtonText="取消" Content="确认要删除选中的所有行吗？"
                                                                  ConfirmButtonColor="Color.Danger" ConfirmButtonText="删除"
                                                                  OnBeforeClick="@(new Func<Task<bool>>(() => ClickDeleteButton(item)))"
                                                                  OnConfirm="@(new Func<Task>(DeleteAsync))" />
                                            }
                                        }
                                        @RowButtonTemplate?.Invoke(item)
                                    </span>
                                </div>
                            }
                        </div>
                    }
                    @if (ShowFooter)
                    {
                        <div class="table-row table-footer">
                            <CascadingValue Value="@ScreenSize" Name="ScreenSize">
                                <CascadingValue Value="@ViewModelResponsiveWidth" Name="ViewModelResponsiveWidth">
                                    @TableFooter?.Invoke(Items)
                                </CascadingValue>
                            </CascadingValue>
                        </div>
                    }
                }
            </div>

            @{
                if (FilterColumns == null) FilterColumns = Columns.Where(i => i.Filterable);
                if (FilterColumns.Any())
                {
                    <div class="table-filter">
                        @foreach (var col in FilterColumns)
                        {
                            <TableFilter Column="col" />
                        }
                    </div>
                }
            }

            @if (TotalCount > 0 && IsPagination)
            {
                <div class="table-pagination">
                    <Pagination PageItemsSource="@PageItemsSource" PageItems="@PageItems" TotalCount="@TotalCount" PageIndex="@PageIndex" OnPageClick="@OnPageClick" OnPageItemsChanged="@OnPageItemsChanged"></Pagination>
                </div>
            }
        </CascadingValue>
    }
</div>

<Dialog />
<Toast />
<PopoverConfirm />

@code {
    RenderFragment<TItem> RenderRow => item =>
    @<RenderTemplate>
        @if (ShowLineNo)
        {
            <td>
                <div class="table-cell">@(StarRowIndex++)</div>
            </td>
        }
        @foreach (var col in Columns)
        {
            <td>
                <div class="@GetCellClassString(col)">
                    @GetValue(col, item)
                </div>
            </td>
        }
        @if (ShowExtendButtons)
        {
            <td>
                <div class="table-cell">
                    <div class="btn-group">
                        @if (ShowDefaultButtons)
                        {
                            @if (ShowEditButton)
                            {
                                <Button Size="Size.ExtraSmall" OnClick="@(EventCallback.Factory.Create<MouseEventArgs>(this, e => ClickEditButton(item)))" Icon="fa fa-edit" Text="编辑" />
                            }
                            @if (ShowDeleteButton)
                            {
                                <PopConfirmButton Placement="Placement.Left" Size="Size.ExtraSmall"
                                                  Color="Color.Danger" Icon="fa fa-remove" Text="删除"
                                                  CloseButtonText="取消" Content="确认要删除选中的所有行吗？"
                                                  ConfirmButtonColor="Color.Danger" ConfirmButtonText="删除"
                                                  OnBeforeClick="@(new Func<Task<bool>>(() => ClickDeleteButton(item)))"
                                                  OnConfirm="@(new Func<Task>(DeleteAsync))" />
                            }
                        }
                        @RowButtonTemplate?.Invoke(item)
                    </div>
                </div>
            </td>
        }
    </RenderTemplate>;
}
